<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<th:block th:fragment="publish">

    <div id="detail_publish" class="publish-section">
        <h5 class="section-title">服务集成</h5>
        <!-- 发布渠道卡片 -->
        <div class="publish-card">
            <div class="channel-card" v-for="(item,index) in publish_list">
                <div class="channel-header">
                    <i class="fas fa-globe channel-icon web"></i>
                    <h3 class="mb-0">{{item.publishType == 0 ? 'WEB预览' : 'API接入'}}</h3>
                    <el-switch style="margin-left:auto;"
                               v-model="item.publishStatus" :active-value="1" :disabled="item.locked"
                               :inactive-value="0" @change="handlePublishStatus(item)">
                    </el-switch>
                </div>
                <div class="channel-config web-config">
                    <div class="mb-3">
                        <div class="input-group mb-3" v-if="item.publishType == 0">
                            <el-input placeholder="请输入内容" v-model="item.agentShowTitle">
                                <template slot="prepend">发布名称</template>
                                <el-button slot="append" @click="publish_title_save(item)">保存</el-button>
                            </el-input>
                        </div>
                        <div class="input-group flex item-center justify-between gap-3">
                            <el-input class="flex-1" placeholder="请输入内容" v-model="item.publishUrl" readonly>
                                <template slot="prepend">发布链接</template>
                                <el-button slot="append" @click="publish_copy(item)"><i class="fas fa-copy"></i> 复制
                                </el-button>
                            </el-input>
                            <el-link v-if="item.publishType == 0" type="primary" :href="item.publishUrl"
                                     target="_blank">访问
                            </el-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        //
        var vue_detail_publish = new Vue({
            el: '#detail_publish',
            data: {
                publish_list: publishList,
            },
            created: function () {

            },
            methods: {
                handlePublishStatus: function (item) {
                    var f = {
                        id: item.id,
                        publishStatus: item.publishStatus,
                    }
                    // console.log('f->', f)
                    api_robot_updatePublishStatus(f, function (res) {
                        if (res.code == 200) {
                            this.$message.success('设置保存成功');
                        } else {
                            this.$message.error('设置保存失败: ' + res.message);
                            setTimeout(function () {
                                window.location.reload()
                            }, 1000)
                        }
                    }.bind(this))
                },
                publish_copy: function (item) {
                    // console.log('item->', item)
                    pxmu.copy(item.publishUrl);
                    this.$message.success('复制成功');
                },
                publish_title_save: function (item) {
                    var f = {
                        id: item.id,
                        agentShowTitle: item.agentShowTitle
                    }
                    api_robot_updateAgentShowTitle(f, function (res) {
                        if (res.code == 200) {
                            this.$message.success('助手主题设置成功');
                        } else {
                            this.$message.error('助手主题设置失败: ' + res.message);
                        }
                    }.bind(this))
                }
            }
        })
    </script>

</th:block>

</body>
</html>